<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>光宗耀祖 - 文化传承平台</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
	<style>
		:root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #f72585;
            --dark-color: #14213d;
            --light-color: #f8f9fa;
            --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        }

        body {
            font-family: 'Noto Serif SC', serif;
            background-color: #f8f9fa;
            color: var(--dark-color);
            line-height: 1.8;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', 'Noto Serif SC', serif;
        }

        .dashboard-header {
            border-radius: 16px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            margin: 40px auto;
            background: white;
            padding: 40px;
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            border: 1px solid rgba(255,255,255,0.2);
            background-clip: padding-box;
            backdrop-filter: blur(10px);
            transform: translateY(0);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .dashboard-header:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .dashboard-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--gradient);
        }

        h2 {
            color: var(--dark-color);
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            font-size: 2.2rem;
        }

        h2::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--gradient);
            border-radius: 2px;
        }

        .ibox {
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            background: white;
            overflow: hidden;
            margin-bottom: 30px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .ibox:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .ibox-title {
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            background: var(--gradient);
            color: white;
            padding: 20px;
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .btn-success {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            padding: 12px 25px;
            border-radius: 50px;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(58, 12, 163, 0.3);
        }

        .btn-success:hover {
            background-color: #2a0a8a;
            border-color: #2a0a8a;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(58, 12, 163, 0.4);
        }

        .btn-outline-primary {
            border-width: 2px;
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-outline-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.2);
        }

        .label-warning {
            background-color: var(--accent-color);
            padding: 8px 15px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            box-shadow: 0 4px 10px rgba(247, 37, 133, 0.3);
        }

        .cultural-list ol {
            counter-reset: item;
            padding-left: 0;
        }

        .cultural-list ol li {
            position: relative;
            padding-left: 45px;
            margin-bottom: 20px;
            list-style: none;
            line-height: 1.8;
            font-size: 1.1rem;
            color: #555;
        }

        .cultural-list ol li::before {
            counter-increment: item;
            content: counter(item);
            position: absolute;
            left: 0;
            top: 0;
            background: var(--gradient);
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        #pay-qrcode img {
            border-radius: 16px;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid #eee;
        }

        #pay-qrcode:hover img {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .feature-card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            height: 100%;
            border: 1px solid rgba(255,255,255,0.2);
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .feature-icon {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1);
        }

        .testimonial {
            background: white;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            position: relative;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .testimonial:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.12);
        }

        .testimonial::before {
            content: """;
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 80px;
            color: rgba(67, 97, 238, 0.1);
            font-family: serif;
            line-height: 1;
            z-index: 0;
        }

        .testimonial p {
            position: relative;
            z-index: 1;
            font-style: italic;
            color: #555;
            font-size: 1.1rem;
        }

        .testimonial-author {
            font-weight: bold;
            margin-top: 20px;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

        .floating-btn {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--gradient);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.4);
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: none;
            outline: none;
        }

        .floating-btn:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 15px 35px rgba(67, 97, 238, 0.5);
        }

        .progress {
            height: 12px;
            border-radius: 6px;
            background-color: #e9ecef;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }

        .progress-bar {
            background: var(--gradient);
            border-radius: 6px;
            box-shadow: none;
            transition: width 1s ease-in-out;
        }

        .avatar-container {
            position: relative;
            display: inline-block;
        }

        .avatar-container::before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            background: var(--gradient);
            z-index: -1;
            border-radius: 50%;
            animation: rotate 6s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .social-links .btn-circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .social-links .btn-circle:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }

        footer {
            background: var(--dark-color);
            color: white;
            padding: 60px 0 30px;
            margin-top: 80px;
            position: relative;
        }

        footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--gradient);
        }

        footer h4 {
            color: white;
            margin-bottom: 25px;
            position: relative;
            font-size: 1.5rem;
        }

        footer h4::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--accent-color);
            border-radius: 2px;
        }

        footer a {
            color: #bbb;
            transition: color 0.3s ease;
            text-decoration: none;
        }

        footer a:hover {
            color: white;
            text-decoration: none;
        }

        footer ul li {
            margin-bottom: 12px;
        }

        footer .fa {
            color: var(--accent-color);
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .ribbon {
            position: absolute;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            overflow: hidden;
        }

        .ribbon span {
            position: absolute;
            top: 30px;
            right: -30px;
            width: 200px;
            padding: 5px 0;
            background: var(--accent-color);
            color: white;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            transform: rotate(45deg);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }

        .version-info {
            background: rgba(67, 97, 238, 0.1);
            padding: 12px 20px;
            border-radius: 50px;
            display: inline-block;
            margin-top: 20px;
            border: 1px solid rgba(67, 97, 238, 0.2);
        }

        .version-info p {
            margin-bottom: 0;
            font-size: 1rem;
        }

        .label-primary {
            background-color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
        }

        .alert-info {
            background-color: rgba(67, 97, 238, 0.1);
            border-color: rgba(67, 97, 238, 0.2);
            color: var(--dark-color);
            border-radius: 12px;
            padding: 15px;
        }

        .alert-info .fa {
            color: var(--primary-color);
        }

        @media (max-width: 992px) {
            .dashboard-header {
                padding: 30px;
            }

            h2 {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 768px) {
            .dashboard-header {
                padding: 20px;
                margin-top: 20px;
            }

            h2 {
                font-size: 1.5rem;
            }

            .feature-card, .testimonial {
                padding: 20px;
            }

            .floating-btn {
                width: 60px;
                height: 60px;
                font-size: 24px;
                bottom: 20px;
                right: 20px;
            }
        }

        /* 粒子背景效果 */
        .particles-js-canvas-el {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }

        /* 加载动画 */
        .loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(67, 97, 238, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 3D卡片效果 */
        .card-3d {
            transform-style: preserve-3d;
            transition: all 0.5s ease;
        }

        .card-3d:hover {
            transform: rotateY(10deg) rotateX(5deg) translateY(-10px);
        }

        /* 打字动画 */
        .typewriter {
            overflow: hidden;
            border-right: 3px solid var(--primary-color);
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: 1px;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--primary-color); }
        }
	</style>
</head>

<body class="gray-bg">
<!-- 加载动画 -->
<div class="loader-wrapper">
	<div class="loader"></div>
</div>

<!-- 粒子背景 -->
<div id="particles-js"></div>

<div class="container">
	<div class="row border-bottom white-bg dashboard-header card-3d">
		<div class="col-sm-3 text-center">
			<div class="avatar-container" style="margin-bottom: 30px;">
				<img th:src="@{/img/qr_code.png}" width="180" height="180" class="img-circle" style="border: 5px solid white; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
			</div>
			<h2>兄弟们好</h2>
			<p class="text-muted" style="font-style: italic; font-size: 1.1rem;">"一天一苹果，医生远离我"</p>
			<div class="social-links" style="margin-top: 30px;">
				<a href="#" class="btn btn-circle btn-primary" style="margin: 0 8px;"><i class="fa fa-weixin"></i></a>
				<a href="#" class="btn btn-circle btn-info" style="margin: 0 8px;"><i class="fa fa-qq"></i></a>
				<a href="#" class="btn btn-circle btn-danger" style="margin: 0 8px;"><i class="fa fa-weibo"></i></a>
			</div>
		</div>
		<div class="col-sm-5">
			<h2 class="typewriter">光宗耀祖</h2>
			<p class="lead" style="font-size: 1.2rem; line-height: 1.8; color: #555;">醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声。沙场秋点兵。马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生</p>

			<div class="version-info">
				<p style="margin-bottom: 0; font-size: 1.1rem;">
					<b>当前版本：</b> <span class="label label-primary">v[[${version}]]</span>
				</p>
			</div>

			<div style="margin-top: 25px;">
				<span class="label label-warning" style="font-size: 1rem;">&yen; 付费观看</span>
			</div>

			<div class="action-buttons" style="margin-top: 35px;">
				<a class="btn btn-success btn-lg" href="https://gitee.com/y_project/RuoYi" target="_blank" style="margin-right: 15px;">
					<i class="fa fa-cloud"> </i> 谢宝乐
				</a>
				<a class="btn btn-outline btn-primary btn-lg" href="http://ruoyi.vip" target="_blank">
					<i class="fa fa-home"></i> 王召权
				</a>
			</div>
		</div>
		<div class="col-sm-4">
			<h2>文化精髓</h2>
			<div class="cultural-list">
				<ol>
					<li>明月松间照，清泉石上流。</li>
					<li>落霞与孤鹜齐飞，秋水共长天一色。</li>
					<li>小荷才露尖尖角，早有蜻蜓立上头。</li>
					<li>曾经沧海难为水，除却巫山不是云。</li>
					<li>玲珑骰子安红豆，入骨相思知不知。</li>
					<li>衣带渐宽终不悔，为伊消得人憔悴。</li>
					<li>纸上得来终觉浅，绝知此事要躬行</li>
					<li>没了</li>
				</ol>
			</div>
		</div>
	</div>
</div>

<div class="wrapper wrapper-content">
	<div class="container">
		<div class="row">
			<div class="col-lg-8">
				<div class="row">
					<div class="col-md-6">
						<div class="feature-card card-3d">
							<div class="feature-icon">
								<i class="fa fa-book"></i>
							</div>
							<h3>文化传承</h3>
							<p>传承中华五千年文化精髓，让经典永流传。我们致力于保护和传播中国传统文化，让更多人了解和欣赏中华文化的博大精深。</p>
						</div>
					</div>
					<div class="col-md-6">
						<div class="feature-card card-3d">
							<div class="feature-icon">
								<i class="fa fa-users"></i>
							</div>
							<h3>兄弟情谊</h3>
							<p>兄弟如手足，情深似海。在这里，我们不仅分享知识，更分享生活中的点滴，建立深厚的兄弟情谊。</p>
							<div class="ribbon"><span>热门</span></div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="feature-card card-3d">
							<div class="feature-icon">
								<i class="fa fa-graduation-cap"></i>
							</div>
							<h3>学习成长</h3>
							<p>学无止境，共同进步。我们提供丰富的学习资源和交流平台，帮助每位兄弟在知识和技能上不断成长。</p>
						</div>
					</div>
					<div class="col-md-6">
						<div class="feature-card card-3d">
							<div class="feature-icon">
								<i class="fa fa-heart"></i>
							</div>
							<h3>情感交流</h3>
							<p>分享生活中的喜怒哀乐，倾诉心中的烦恼与快乐。这里是一个温暖的情感港湾，让每个兄弟都能找到共鸣。</p>
						</div>
					</div>
				</div>

				<div class="ibox card-3d">
					<div class="ibox-title">
						<h5>用户评价</h5>
					</div>
					<div class="ibox-content">
						<div class="row">
							<div class="col-md-6">
								<div class="testimonial card-3d">
									<p>"这个平台让我重新认识了中华文化的魅力，每天都能学到新东西，非常感谢！"</p>
									<div class="testimonial-author">王召权</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="testimonial card-3d">
									<p>"兄弟情谊在这里得到了最好的诠释，认识了很多志同道合的朋友，非常值得！"</p>
									<div class="testimonial-author">赵嘉铭</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-lg-4">
				<div class="ibox float-e-margins card-3d">
					<div class="ibox-title">
						<h5>付款信息</h5>
					</div>
					<div class="ibox-content">
						<ul class="list-unstyled contact-list">
							<li style="margin-bottom: 20px;">
								<i class="fa fa-globe" style="color: var(--primary-color); margin-right: 10px;"></i>
								<strong>官网：</strong>
								<a href="https://gitee.com/sun-xiaoyuan123/pims5" target="_blank" style="word-break: break-all;">https://gitee.com/sun-xiaoyuan123/pims5/issues</a>
							</li>
							<li style="margin-bottom: 20px;">
								<i class="fa fa-qq" style="color: var(--primary-color); margin-right: 10px;"></i>
								<strong>QQ：</strong>
								<a href="javascript:;">孙梦莹：1396489424</a>
							</li>
							<li style="margin-bottom: 20px;">
								<i class="fa fa-weixin" style="color: var(--primary-color); margin-right: 10px;"></i>
								<strong>微信：</strong>
								<a href="javascript:;">孙晓圆：56598874185</a>
							</li>
							<li style="margin-bottom: 20px;">
								<i class="fa fa-credit-card" style="color: var(--primary-color); margin-right: 10px;"></i>
								<strong>支付宝：</strong>
								<a href="javascript:;">谢宝乐</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="ibox float-e-margins card-3d">
					<div class="ibox-title">
						<h5>支持我们</h5>
					</div>
					<div class="ibox-content">
						<div class="alert alert-info">
							<i class="fa fa-info-circle"></i> 您的支持是我们前进的动力，给兄弟发个红包吧！
						</div>
						<div id="pay-qrcode" style="text-align: center;">
							<a href="javascript:;">
								<img th:src="@{/img/pay.png}" width="80%" alt="请使用手机支付宝或者微信扫码支付" style="border: 1px solid #eee;">
							</a>
							<p style="margin-top: 15px; font-size: 14px; color: #777;">点击图片放大</p>
						</div>
						<div class="progress" style="margin-top: 25px;">
							<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
								<span class="sr-only">65% Complete</span>
							</div>
						</div>
						<p style="text-align: center; margin-top: 15px; font-size: 14px;">给兄弟发个红包</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<footer class="footer">
	<div class="container">
		<div class="row">
			<div class="col-lg-4">
				<h4>关于我们</h4>
				<p style="color: #bbb;">光宗耀祖是一个致力于传承中华文化、弘扬兄弟情谊的平台。我们希望通过这个平台，让更多人了解和热爱中国传统文化。</p>
			</div>
			<div class="col-lg-4">
				<h4>快速链接</h4>
				<ul class="list-unstyled">
					<li><a href="#"><i class="fa fa-angle-right"></i> 首页</a></li>
					<li><a href="#"><i class="fa fa-angle-right"></i> 文化传承</a></li>
					<li><a href="#"><i class="fa fa-angle-right"></i> 兄弟情谊</a></li>
					<li><a href="#"><i class="fa fa-angle-right"></i> 联系我们</a></li>
				</ul>
			</div>
			<div class="col-lg-4">
				<h4>联系方式</h4>
				<ul class="list-unstyled">
					<li><i class="fa fa-map-marker"></i> 中国北京市海淀区</li>
					<li><i class="fa fa-phone"></i> (86) 138-0013-8000</li>
					<li><i class="fa fa-envelope"></i> contact@gzyz.com</li>
				</ul>
			</div>
		</div>
		<hr style="border-color: rgba(255,255,255,0.1); margin: 30px 0;">
		<div class="row">
			<div class="col-md-12 text-center">
				<p style="margin-bottom: 0; color: #bbb;">&copy; 2023 光宗耀祖文化传承平台. 保留所有权利.</p>
			</div>
		</div>
	</div>
</footer>

<div class="floating-btn" id="back-to-top">
	<i class="fa fa-arrow-up"></i>
</div>

<!-- 引入粒子效果库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
	// 页面加载动画
    $(window).on('load', function() {
        $('.loader-wrapper').fadeOut('slow');
    });

    // 初始化粒子效果
    document.addEventListener('DOMContentLoaded', function() {
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#4361ee" },
                shape: { type: "circle" },
                opacity: { value: 0.5, random: true },
                size: { value: 3, random: true },
                line_linked: { enable: true, distance: 150, color: "#4361ee", opacity: 0.4, width: 1 },
                move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "grab" },
                    onclick: { enable: true, mode: "push" }
                },
                modes: {
                    grab: { distance: 140, line_linked: { opacity: 1 } },
                    push: { particles_nb: 4 }
                }
            }
        });
    });

    $('#pay-qrcode').click(function(){
        var html=$(this).html();
        parent.layer.open({
            title: false,
            type: 1,
            closeBtn: false,
            shadeClose: true,
            area: ['600px', '360px'],
            content: html,
            end: function() {
                // 关闭时的回调
            }
        });
    });

    // 平滑滚动到顶部
    $('#back-to-top').click(function() {
        $('html, body').animate({scrollTop: 0}, 800, 'easeInOutExpo');
        return false;
    });

    // 滚动显示返回顶部按钮
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();
        }
    });

    // 卡片动画效果
    $(document).ready(function() {
        $('.feature-card').each(function(i) {
            $(this).delay(i * 200).animate({opacity: 1, top: 0}, 500);
        });

        // 3D卡片效果
        $('.card-3d').on('mousemove', function(e) {
            var $this = $(this);
            var offset = $this.offset();
            var x = e.pageX - offset.left;
            var y = e.pageY - offset.top;
            var centerX = $this.outerWidth() / 2;
            var centerY = $this.outerHeight() / 2;
            var angleX = (y - centerY) / 20;
            var angleY = (centerX - x) / 20;

            $this.css('transform', 'rotateX('+angleX+'deg) rotateY('+angleY+'deg)');
        });

        $('.card-3d').on('mouseleave', function() {
            $(this).css('transform', 'rotateX(0) rotateY(0)');
        });
    });

    // 打字机效果
    function typeWriter(element, text, i, fnCallback) {
        if (i < text.length) {
            element.html(text.substring(0, i+1));
            setTimeout(function() { typeWriter(element, text, i + 1, fnCallback) }, 100);
        } else if (typeof fnCallback == 'function') {
            setTimeout(fnCallback, 700);
        }
    }

    $(document).ready(function() {
        var text = $('.typewriter').text();
        $('.typewriter').html('');
        typeWriter($('.typewriter'), text, 0, function() {
            $('.typewriter').css('border-right', 'none');
        });
    });
</script>
</body>
</html>